<template>
    <div class="manageHotel-wrapper" >
<!--        {{mgrHotelList}}-->
        <a-tabs >
            <a-tab-pane  key="1">
                <span slot="tab">
                   <a-icon type="setting" />
                     酒店管理
                </span>
                <transition name="fade-transform" mode="out-in">
                    <div v-if="!addRoomModalVisible">
                            <div style="width: 100%; text-align: right; margin:20px 0">
                                <a-button type="primary" @click="addHotel">
                                    <a-icon type="plus"/>
                                    添加酒店
                                </a-button>
                            </div>
                            <a-table
                                    :columns="columns1"
                                    :dataSource="mgrHotelList"
                                    :row-key="record => record.id"

                                    bordered
                            >
                    <span slot="action1" slot-scope="record">
                         <a @click="submitpic(record)">上传图片</a>
                        <a-divider type="vertical"></a-divider>
                        <a-icon type="form" @click="manageHotel(record)" />
                    </span>
                                <span slot="action2" slot-scope="record">
                        <a-icon type="bell" style="color: dodgerblue"/>
                        <a @click="showDrawer(record.id)">今日异常</a> <br>
                                    <a-icon type="tool" style="color: dodgerblue"/>
                        <a @click="manageRoom(record)" style="line-height: 30px">房间管理</a> <br>
                        <a-icon type="gift" style="color: dodgerblue"/>
                        <a @click="showCoupon(record)" >优惠策略</a>
                    </span>
                            </a-table>
                        </div>
                    <room-manage-panel></room-manage-panel>
                </transition>
            </a-tab-pane>
            <a-tab-pane  key="2">
                  <span slot="tab">
                <a-icon type="profile" />
                     订单管理
                </span>
                <a-table
                        :columns="columns2"
                        :dataSource="managedOrders"
                >
                    <span slot="price" slot-scope="text">
                        <span>￥{{ text }}</span>
                    </span>
                    <span slot="roomType" slot-scope="text">
                        <span v-if="text == 'BigBed'">大床房</span>
                        <span v-if="text == 'DoubleBed'">双床房</span>
                        <span v-if="text == 'Family'">家庭房</span>
                    </span>

                    <span slot="action" slot-scope="record">
                        <a @click="checkin(record.id)">已入住</a>
                        <a-divider type="vertical"></a-divider>
                        <a @click="checkout(record.id)">已退房</a>
<!--                        <a-divider type="vertical"></a-divider>-->
<!--                        <a @click="showDetail(record)">取消异常</a>-->
                        <a-divider type="vertical"></a-divider>
                        <a-popconfirm
                                title="确定想删除该订单吗？"
                                @confirm="delOrder(record.id)"
                                okText="确定"
                                cancelText="取消"
                        >
                            <a-icon type="delete" theme="twoTone" twoToneColor="red" />
                        </a-popconfirm>
                    </span>
                </a-table>
            </a-tab-pane>
        </a-tabs>
        <AddHotelModal></AddHotelModal>
        <Coupon></Coupon>
        <unusualOrder :hotelId="id" ></unusualOrder>
        <ManageHotelModal :record="clickedRecord"></ManageHotelModal>
        <add-hotel-picture-model :hotelId="id"></add-hotel-picture-model>

    </div>
</template>
<script>
    import {mapGetters, mapMutations, mapActions} from 'vuex'
    import AddHotelModal from './components/addHotelModal'
    import RoomManagePanel from './components/roomManagePanel'
    import Coupon from './components/coupon'
    import unusualOrder from "./components/unusualOrder";
    import ManageHotelModal from "./components/manageHotelModal";
    import addHotelPictureModel from "./components/addHotelPictureModel";

    const moment = require('moment')
    const columns1 = [
        {
            title: '酒店名',
            dataIndex: 'name',
        },
        {
            title: '商圈',
            dataIndex: 'bizRegion',
            width: 100
        },
        {
            title: '地址',
            dataIndex: 'address',
        },
        {
            title: '酒店星级',
            dataIndex: 'hotelStar',
            width: 90
        },
        {
            title: '评分',
            dataIndex: 'rate',
            width: 70
        },
        {
            title: '简介',
            dataIndex: 'description',

            width: 350,
        },
        {
            title: '编辑',
            key: 'action1',
            width:120,
            scopedSlots: {customRender: 'action1'},
        },
        {
            title: '操作',
            key: 'action2',
            width:120,
            scopedSlots: {customRender: 'action2'},
        },
    ];
    const columns2 = [
        {
            title: '订单号',
            dataIndex: 'id',
        },
        {
            title: '订单状态',
            filters: [{text: '已预订', value: '已预订'},{text: '已退房', value: '已退房'}, {text: '异常', value: '异常'}, {text: '已取消', value: '已取消'}, {text: '已执行', value: '已执行'}],
            onFilter: (value, record) => record.orderState.includes(value),
            dataIndex: 'orderState',
        },
        {
            title: '酒店名',
            dataIndex: 'hotelName',
        },
        {
            title: '房型',
            dataIndex: 'roomType',
            scopedSlots: {customRender: 'roomType'},
            filters: [{text: '大床房', value: '大床房'},{text: '双床房', value: '双床房'}, {text: '家庭房', value: '家庭房'}],
            onFilter: (value, record) => record.roomType.includes(value),

        },
        {
            title: '入住时间',
            dataIndex: 'checkInDate',
            scopedSlots: {customRender: 'checkInDate'}
        },
        {
            title: '离店时间',
            dataIndex: 'checkOutDate',
            scopedSlots: {customRender: 'checkOutDate'}
        },
        {
            title: '入住人数',
            dataIndex: 'peopleNum',
        },
        {
            title: '房价',
            dataIndex: 'price',
        },
        {
            title: '操作',
            key: 'action',
            scopedSlots: {customRender: 'action'},
        },
    ];
    const columns3 = [];
    export default {
        name: 'manageHotel',
        data() {
            return {
                id:'',
                formLayout: 'horizontal',
                pagination: {},
                columns1,
                columns2,
                visible: false,
                form: this.$form.createForm(this, {name: 'manageHotel'}),
                clickedRecord:{},
                submitpicvisible:false
            }
        },
        components: {
            AddHotelModal,
            RoomManagePanel,
            Coupon,
            unusualOrder,
            ManageHotelModal,
            addHotelPictureModel
        },
        computed: {
            ...mapGetters([
                'userId',
                'orderList',
                'unusualOrderList',
                'managedOrders',
                'mgrHotelList',
                'addHotelModalVisible',
                'addRoomModalVisible',
                'activeHotelId',
                'couponVisible',
                'unusualOrderVisible',
                'currentHotelInfo'
            ]),
        },
        async mounted() {
            await this.getMgrHotelList(this.userId)
            await this.getManagedOrders(this.userId)
            await this.getUserInfo()
            // await this.getHotelById()
        },
        methods: {
            ...mapMutations([
                'set_addHotelModalVisible',
                'set_addRoomModalVisible',
                'set_couponVisible',
                'set_activeHotelId',
                'set_unusualOrderVisible',
                'set_manageHotelVisible',
                'set_addhotelpicVisible'
            ]),
            ...mapActions([
                'getUserInfo',
                'getMgrHotelList',
                'getAllOrders',
                'getHotelCoupon',
                'deleteOrder',
                'getManagedOrders',
                'getHotelById',
                'checkIn',
                'checkOut',
                'getUnusualOrderList'
            ]),
            showDrawer(id) {
                this.getUnusualOrderList(id)
                this.set_unusualOrderVisible(true);
            },
            checkin(id){
                const ids={
                    orderId:id,
                    userId:this.userId
                }
                this.checkIn(ids)
            },
            checkout(id){
                const ids={
                    orderId:id,
                    userId:this.userId
                }
                this.checkOut(ids)
            },
            submitpic(record){
                this.id=record.id;
                this.set_addhotelpicVisible(true)
            },
            addHotel() {
                this.set_addHotelModalVisible(true)
            },
            manageRoom(record) {
                this.set_activeHotelId(record.id)
                this.set_addRoomModalVisible(true)
                this.set_manageHotelVisible(false)
            },
            showCoupon(record) {
                this.set_activeHotelId(record.id)
                this.set_couponVisible(true)
                this.getHotelCoupon()
            },
            manageHotel(record) {
                this.clickedRecord=record;
                this.set_activeHotelId(record.id)
                this.set_manageHotelVisible(true)
            },
            deleteHotel() {

            },
            delOrder(id) {
                this.deleteOrder(id)
            },
        }
    }
</script>
<style scoped lang="less">
    .manageHotel-wrapper {
        padding: 50px 100px;
        margin: 50px 50px 50px 50px;
        border: 1px solid #d9d9d9;
        background: #ffffff;
        border-radius: 20px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
        .chart {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-top: 20px
        }
    }
</style>
<style lang="less">
    .manageHotel-wrapper {
        .ant-tabs-bar {
            padding-left: 30px
        }
    }
</style>
<style>
</style>
